<template>
  <div class="change">
    <div class="change-body">
      <div class="changepart">
        <template>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="我的信息" name="first">
              <usermissageForm v-model="photo[0]" />
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <h4 style="margin: 20px 0 10px 10px">头像信息/更换</h4>
      <div class="changepart" style="padding: 30px; display: flex;">
        <template>
          <viewer :images="photo">
            <!-- photo 一定要一个数组，否则报错 -->
            <img v-for="(src, index) in photo" :src="src" :key="index" :onerror="errorImg" width="240px"
              height="260px" />
          </viewer>
        </template>
        <van-uploader v-model="fileList" multiple capture :after-read="afterRead" />
      </div>
    </div>
  </div>
</template>

<script>
import usermissageForm from "../personal/components_part/usermissageForm.vue";
import { Uploader } from "vant";
import {
  base64ToBlob,
  getFilenameAndMimetypeFromBase64,
} from "./utils/base64toFile.js";
import {
  uploadImg, // 上传拍照的图片
} from "./utils/upload";

export default {
  components: {
    usermissageForm,
    [Uploader.name]: Uploader,
  },
  data() {
    return {
      activeName: "first",
      photo: [],
      fileList: [],
      form: {
        files: [], // 初始化 form 对象，并包含 files 属性
      },
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    errorImg(e) {
      e.target.src = "../assets/logo.png"; // 替换为默认图片路径
    },
    afterRead(res) {
      // 此时可以自行将文件上传至服务器
      // console.log(res, "file");
      // base64格式赋值, .......
      const data = res.content;
      // 将 base64 编码的文件数据转为 Blob 对象
      const blob = base64ToBlob(data);
      // 获取文件名和 mime 类型
      const [filename, mimeType] = getFilenameAndMimetypeFromBase64(data);
      console.log(filename, mimeType);
      // 将 Blob 对象转换为 File 对象
      const file = new File([blob], res.file.name, { type: mimeType });
      // 写入formData
      const formData = new FormData();
      formData.append("file", file);
      // 执行上传方法
      uploadImg(formData, this)
        .then((res) => {
          console.log(res, "上传结果", this.fileList);
          this.$message.success("请退出！重新登录即可查看头像！");
          // this.form.files.push(res.data); // 写入form参数
          
        })
        .catch((err) => {
          console.error("上传失败:", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.change {
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  padding: 20px;
  background-color: #f0f0f0;

  .change-body {
    // width: 100%;
    // height: 100%;
    width: calc(100% - 40px);
    padding: 20px;
    background-color: #fff;

    .changepart {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.16);
      min-height: 100px;
    }
  }
}
::v-deep .van-uploader__upload {
    width: 240px;
    height: 260px;
    margin: 0 8px 8px 10px;
    background-color: #f7f8fa;
}
::v-deep .van-uploader__upload:hover {
  cursor: pointer; /* 鼠标悬停时的指针样式 */
  border: 2px solid #007bff; /* 鼠标悬停时的边框颜色和宽度 */
}
/* 调整上传图标和文本的大小 */
::v-deep .van-icon {
  font-size: 40px; /* 调整图标大小 */
}
</style>
